<template>
  <div class="add">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="el_card">
      <el-steps :space="200" :active="active - 0" finish-status="success">
        <el-step title="基本信息"></el-step>
        <el-step title="商品参数"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="商品图片"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>

      <el-tabs tab-position="left" style="height: 400px" v-model="active">
        <el-tab-pane label="基本信息" name="0">
          <el-form
            :model="runForm"
            :rules="addRules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="商品名称" prop="name">
              <el-input v-model="runForm.username"></el-input>
            </el-form-item>
            <el-form-item label="商品数量" prop="name">
              <el-input v-model="runForm.price"></el-input>
            </el-form-item>
            <el-form-item label="商品重量" prop="name">
              <el-input v-model="runForm.zhongliang"></el-input>
            </el-form-item>
            <el-form-item label="商品数量" prop="name">
              <el-input v-model="runForm.num"></el-input>
            </el-form-item>
            <el-form-item label="商品分类" prop="region">
              <el-cascader
                :options="options"
                :show-all-levels="false"
              ></el-cascader>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="商品参数" name="1">商品参数</el-tab-pane>
        <el-tab-pane label="商品属性" name="2">商品属性</el-tab-pane>
        <el-tab-pane label="商品图片" name="3">
          <el-upload
            class="upload-demo"
            action="http://127.0.0.1:8888/api/private/v1/upload"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            list-type="picture"
            :headers="headers"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-tab-pane>
        <el-tab-pane label="商品内容" name="4">
          <quill-editor v-model="Editor" :options="editorOption"></quill-editor>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { getCat } from "@/http/Goods";
export default {
  data() {
    return {
      active: 0,
      tabPosition: "left",
      headers: {
        Authorization: this.$store.getters.token,
      },
      Editor: "",
      editorOption: {
        // modules: {
        //   toolbar: ['bold', 'italic', 'underline', 'strike']
        // },
        // Some Quill optiosn...
      },
      runForm: {
        username: "",
      },
      addRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      options: [{}],
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    async CatList() {
      let res = await getCat();
      console.log(res);
      this.options=res.data
    },
  },
  mounted() {
    this.CatList()
  },
  components: {
    quillEditor,
  },
};
</script>
<style lang="scss" scoped>
.add {
  width: 100%;
  height: 100%;
  .el_card {
    width: 100%;
    background-color: white;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
  }
  .el-steps {
    height: 100%;
  }
}
</style>